<template>
  <div class="scenic-container">
    <!-- Top section -->
    <div class="top-section">
      <!-- Left sidebar -->
      <div class="sidebar">
        <div class="sidebar-item hover-trigger" @mouseenter="showDestinationPopup = true" @mouseleave="showDestinationPopup = false">
          <h3 class="sidebar-title">
            <span class="icon"></span>热门目的地
          </h3>
          <ul class="sidebar-list multi-column">
            <li v-for="city in ['香港', '北京', '上海', '海南', '广州', '杭州', '桂林', '厦门']" 
                :key="city"
                @click="goToSearch(city, 'city')">{{ city }}</li>
          </ul>
          <!-- Destination Popup -->
          <div class="destination-popup" v-if="showDestinationPopup">
            <div class="popup-content">
              <!-- A-E Section -->
              <div class="city-section">
                <div class="letter-group">
                  <h3>A B C D E</h3>
                  <div class="city-grid">
                    <a href="#" v-for="city in citiesAE" :key="city" @click.prevent="goToSearch(city, 'city')">{{ city }}</a>
                  </div>
                </div>
              </div>
              <!-- F-J Section -->
              <div class="city-section">
                <div class="letter-group">
                  <h3>F G H I J</h3>
                  <div class="city-grid">
                    <a href="#" v-for="city in citiesFJ" :key="city" @click.prevent="goToSearch(city, 'city')">{{ city }}</a>
                  </div>
                </div>
              </div>
              <!-- K-O Section -->
              <div class="city-section">
                <div class="letter-group">
                  <h3>K L N M O</h3>
                  <div class="city-grid">
                    <a href="#" v-for="city in citiesKO" :key="city" @click.prevent="goToSearch(city, 'city')">{{ city }}</a>
                  </div>
                </div>
              </div>
              <!-- P-T Section -->
              <div class="city-section">
                <div class="letter-group">
                  <h3>P Q R S T</h3>
                  <div class="city-grid">
                    <a href="#" v-for="city in citiesPT" :key="city" @click.prevent="goToSearch(city, 'city')">{{ city }}</a>
                  </div>
                </div>
              </div>
              <!-- U-Z Section -->
              <div class="city-section">
                <div class="letter-group">
                  <h3>U V W X Y Z</h3>
                  <div class="city-grid">
                    <a href="#" v-for="city in citiesUZ" :key="city" @click.prevent="goToSearch(city, 'city')">{{ city }}</a>
                  </div>
                </div>
              </div>
              <!-- International Section -->
              <div class="city-section">
                <div class="letter-group">
                  <h3>海外热门目的地</h3>
                  <div class="city-grid">
                    <a href="#" v-for="city in citiesInternational" :key="city" @click.prevent="goToSearch(city, 'city')">{{ city }}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sidebar-item">
          <h3 class="sidebar-title">
            <span class="icon"></span>旅游主题
          </h3>
          <ul class="sidebar-list multi-column">
            <li v-for="theme in ['主题乐园', '自然风景', '历史古迹', '博物馆', '文化遗产', '海滩度假']"
                :key="theme"
                @click="goToSearch(theme, 'theme')">{{ theme }}</li>
          </ul>
        </div>
        <div class="sidebar-item">
          <h3 class="sidebar-title">
            <span class="icon"></span>热门景点
          </h3>
          <ul class="sidebar-list">
            <li v-for="spot in ['故宫博物院', '香港迪士尼', '长隆主题乐园', '上海迪士尼']"
                :key="spot"
                @click="goToSearch(spot, 'spot')">{{ spot }}</li>
          </ul>
        </div>
      </div>

      <!-- Main content -->
      <div class="main-content">
        <div class="banner-top">
          <img :src="getImagePath('banner-top.jpg')" alt="周邊推薦" @error="handleImageError">
        </div>
        <div class="banner-bottom">
          <img :src="getImagePath('banner-bottom.jpg')" alt="打卡全球网红地" @error="handleImageError">
        </div>
      </div>
      
      <!-- Right banner -->
      <div class="right-banner">
        <img :src="getImagePath('clouds.jpg')" alt="Clouds" @error="handleImageError">
        <div class="overlay">
            <div class="date-day">{{ currentDay }}</div>
            <div class="date-month-year">{{ currentMonthYear }}</div>
            <div class="description">行到水穷处，坐看云起时</div>
            <div class="location">© 中国 · 西安 · 终南山南五台景区</div>
        </div>
      </div>
    </div>

    <!-- Bottom section -->
    <div class="bottom-section">
      <div class="bottom-header">
        <h2 class="bottom-title">国内景点</h2>
        <div class="tabs">
          <span 
            v-for="province in domesticProvinces" 
            :key="province"
            :class="['tab-item', selectedProvince === province ? 'active' : '']"
            @click="searchDomesticAttractions(province)">
            {{ province }}
          </span>
        </div>
      </div>
      <div class="tickets-container">
        <div class="ranking-list">
          <div class="rank-item" v-for="(attraction, index) in domesticAttractions" :key="index">
            <span class="rank-badge">{{ index + 1 }}</span>
            <span class="rank-name">{{ attraction?.name || '' }}</span>
          </div>
        </div>
        <div class="tickets-grid">
          <div class="ticket-card" 
            v-for="(attraction, index) in domesticAttractions" 
            :key="index"
            @click="goToDetail(attraction.attractionId)">
            <img 
              :src="getImagePath(attraction?.mainCoverImage)" 
              :alt="attraction?.name || '景点图片'"
              @error="handleImageError"
            >
            <div class="ticket-info">
              <h3>{{ attraction?.name || '' }}</h3>
              <p>{{ attraction?.city || '' }}, {{ attraction?.province || '' }}</p>
              <p class="description">{{ attraction?.description || '' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Overseas Tickets Section -->
    <div class="bottom-section">
      <div class="bottom-header">
        <h2 class="bottom-title">境外景点</h2>
        <div class="tabs">
          <span 
            v-for="country in foreignCountries" 
            :key="country"
            :class="['tab-item', selectedCountry === country ? 'active' : '']"
            @click="searchForeignAttractions(country)">
            {{ country }}
          </span>
        </div>
      </div>
      <div class="tickets-container">
        <div class="ranking-list">
          <div class="rank-item" v-for="(attraction, index) in foreignAttractions" :key="index">
            <span class="rank-badge">{{ index + 1 }}</span>
            <span class="rank-name">{{ attraction?.name || '' }}</span>
          </div>
        </div>
        <div class="tickets-grid">
          <div class="ticket-card" 
            v-for="(attraction, index) in foreignAttractions" 
            :key="index"
            @click="goToDetail(attraction.attractionId)">
            <img 
              :src="getImagePath(attraction?.mainCoverImage)" 
              :alt="attraction?.name || '景点图片'"
              @error="handleImageError"
            >
            <div class="ticket-info">
              <h3>{{ attraction?.name || '' }}</h3>
              <p>{{ attraction?.city || '' }}, {{ attraction?.country || attraction?.province || '' }}</p>
              <p class="description">{{ attraction?.description || '' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Cooperative Scenic Spots Section -->
    <div class="coop-section">
      <h2 class="bottom-title">码上游合作景区</h2>
      <div class="logo-grid">
        <div class="logo-item" v-for="i in 12" :key="i">
          <img 
            :src="getLocalImagePath(i)" 
            :alt="'合作景区' + i"
            @error="handleImageError"
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "Scenic",

  data() {
    return {
      defaultImage: new URL('../imgs/abc.jpg', import.meta.url).href,
      showDestinationPopup: false,
      imageStates: new Map(),
      citiesAE: ['阿坝', '澳门', '鞍山', '北海', '本溪', '保定', '白山', '常州', '成都', '池州', '重庆', '承德', '长春', '长沙', '柳州', '东莞', '大连', '大理', '大庆'],
      citiesFJ: ['佛山', '福州', '抚顺', '广州', '桂林', '甘孜', '河源', '杭州', '湖州', '淮安', '海口', '黄山', '合肥', '邯郸', '哈尔滨', '江门', '嘉兴', '金华', '焦作', '九江'],
      citiesKO: ['开封', '昆明', '丽水', '连云港', '宁德', '龙岩', '乐山', '临沂', '廊坊', '洛阳', '丽江', '茂名', '绵阳', '宁波', '南京', '南通', '南宁', '南平', '南昌'],
      citiesPT: ['平顶山', '清远', '衢州', '千岛湖', '青岛', '秦皇岛', '深圳', '韶关', '绍兴', '苏州', '三亚', '三明', '沈阳', '石家庄', '上饶', '台州', '泰州', '泰安'],
      citiesUZ: ['温州', '无锡', '武汉', '芜湖', '徐州', '厦门', '咸宁', '新乡', '西双版纳', '湘西', '扬州', '宜昌', '烟台', '运城', '阳泉', '宜春', '珠海', '中山', '舟山', '郑州', '张家界'],
      citiesInternational: ['东京', '大阪', '新加坡', '洛杉矶', '拉斯维加斯', '纽约', '曼谷', '芭提雅', '首尔', '济州岛', '法国', '马来西亚', '英国', '澳大利亚'],
      
      domesticProvinces: ['浙江', '江苏', '广东', '海南', '北京', '上海'],
      foreignCountries: ['中国澳门', '美国', '日本', '泰国', '法国'],
      selectedProvince: '浙江',
      selectedCountry: '中国澳门',
      domesticAttractions: [],
      foreignAttractions: [],
      pageSize: {
        domestic: 4,
        foreign: 8
      },
      domesticData: {
        page: 1,
        size: 8,
        total: 0,
        data: []
      },
      foreignData: {
        page: 1,
        size: 8,
        total: 0,
        data: []
      }
    };
  },
  computed: {
    currentDay() {
      return new Date().getDate();
    },
    currentMonthYear() {
      const date = new Date();
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      return `${year}.${month}`;
    }
  },
  methods: {
    goToDetail(id) {
      this.$router.push(`/scenic/attractionId=${id}`);
    },
    goToSearch(keyword, type = 'city') {
      let params = {};
      
      switch(type) {
        case 'city':
          // 热门目的地
          params = {
            province: keyword,
            searchType: 'region'
          };
          break;
        case 'theme':
          // 旅游主题
          params = {
            category: keyword,
            searchType: 'category'
          };
          break;
        case 'spot':
          // 热门景点
          params = {
            keyword: keyword,
            searchType: 'name'
          };
          break;
        default:
          params = { keyword };
      }
      
      this.$router.push({
        name: 'Search',
        query: params
      });
    },
    async searchDomesticAttractions(province) {
      try {
        console.log('获取国内景点数据，省份:', province);
        this.selectedProvince = province;
        
        const response = await axios.post('/scenicspot/search', {
          province: province,
          pageNum: 1,
          pageSize: this.pageSize.domestic
        });
        
        if (response.data) {
          this.domesticData = response.data || { page: 1, size: 8, total: 0, data: [] };
          this.domesticAttractions = (response.data && response.data.data) ? response.data.data : [];
          console.log('设置国内景点数据成功:', this.domesticAttractions);
        }
      } catch (error) {
        console.error("获取国内景点数据失败:", error);
        // 如果API调用失败，使用模拟数据
        this.domesticAttractions = this.getMockDomesticData(province);
        this.domesticData = { 
          page: 1, 
          size: this.pageSize.domestic, 
          total: this.domesticAttractions.length, 
          data: this.domesticAttractions 
        };
      }
    },
    async searchForeignAttractions(country) {
      try {
        console.log('获取境外景点数据，国家:', country);
        this.selectedCountry = country;
        
        const response = await axios.post('/scenicspot/search', {
          country: country,
          pageNum: 1,
          pageSize: this.pageSize.foreign
        });
        
        if (response.data) {
          this.foreignData = response.data || { page: 1, size: 8, total: 0, data: [] };
          this.foreignAttractions = (response.data && response.data.data) ? response.data.data : [];
          console.log('设置境外景点数据成功:', this.foreignAttractions);
        }
      } catch (error) {
        console.error('获取境外景点数据失败:', error);
        // 如果API调用失败，使用模拟数据
        this.foreignAttractions = this.getMockForeignData(country);
        this.foreignData = { 
          page: 1, 
          size: this.pageSize.foreign, 
          total: this.foreignAttractions.length, 
          data: this.foreignAttractions 
        };
      }
    },
    // 模拟获取国内景点数据的函数
    getMockDomesticData(province) {
      const mockData = {
        '浙江': [
          { id: 1, name: '西湖', city: '杭州', province: '浙江', price: 80, description: '西湖十景，人间天堂', coverImage: 'https://fastly.picsum.photos/id/1001/400/300.jpg' },
          { id: 2, name: '千岛湖', city: '淳安', province: '浙江', price: 150, description: '山清水秀，鱼跃鸟飞', coverImage: 'https://fastly.picsum.photos/id/1002/400/300.jpg' },
          { id: 3, name: '乌镇', city: '嘉兴', province: '浙江', price: 120, description: '江南水乡，古镇风情', coverImage: 'https://fastly.picsum.photos/id/1003/400/300.jpg' },
          { id: 4, name: '雁荡山', city: '温州', province: '浙江', price: 140, description: '奇峰异石，山水胜景', coverImage: 'https://fastly.picsum.photos/id/1004/400/300.jpg' }
        ],
        '江苏': [
          { id: 5, name: '拙政园', city: '苏州', province: '江苏', price: 90, description: '江南园林，世界遗产', coverImage: 'https://fastly.picsum.photos/id/1005/400/300.jpg' },
          { id: 6, name: '夫子庙', city: '南京', province: '江苏', price: 60, description: '秦淮风光，古街文化', coverImage: 'https://fastly.picsum.photos/id/1006/400/300.jpg' },
          { id: 7, name: '周庄', city: '昆山', province: '江苏', price: 100, description: '水乡古镇，江南典范', coverImage: 'https://fastly.picsum.photos/id/1007/400/300.jpg' },
          { id: 8, name: '瘦西湖', city: '扬州', province: '江苏', price: 120, description: '扬州园林，诗意江南', coverImage: 'https://fastly.picsum.photos/id/1008/400/300.jpg' }
        ],
        '广东': [
          { id: 9, name: '长隆欢乐世界', city: '广州', province: '广东', price: 230, description: '主题乐园，欢乐天地', coverImage: 'https://picsum.photos/400/300?random=9' },
          { id: 10, name: '白云山', city: '广州', province: '广东', price: 60, description: '岭南名山，都市绿肺', coverImage: 'https://picsum.photos/400/300?random=10' },
          { id: 11, name: '深圳世界之窗', city: '深圳', province: '广东', price: 180, description: '环球风情，缩微世界', coverImage: 'https://picsum.photos/400/300?random=11' },
          { id: 12, name: '珠海长隆海洋王国', city: '珠海', province: '广东', price: 350, description: '海洋奇观，精彩表演', coverImage: 'https://picsum.photos/400/300?random=12' }
        ],
        '海南': [
          { id: 13, name: '亚龙湾', city: '三亚', province: '海南', price: 160, description: '碧海蓝天，度假天堂', coverImage: 'https://picsum.photos/400/300?random=13' },
          { id: 14, name: '天涯海角', city: '三亚', province: '海南', price: 120, description: '南海胜景，浪漫地标', coverImage: 'https://picsum.photos/400/300?random=14' },
          { id: 15, name: '南山文化旅游区', city: '三亚', province: '海南', price: 150, description: '佛教圣地，文化胜地', coverImage: 'https://picsum.photos/400/300?random=15' },
          { id: 16, name: '蜈支洲岛', city: '三亚', province: '海南', price: 180, description: '海岛风光，潜水胜地', coverImage: 'https://picsum.photos/400/300?random=16' }
        ],
        '北京': [
          { id: 17, name: '故宫', city: '北京', province: '北京', price: 60, description: '紫禁城，皇家宫殿', coverImage: 'https://picsum.photos/400/300?random=17' },
          { id: 18, name: '八达岭长城', city: '北京', province: '北京', price: 120, description: '万里长城，雄伟壮观', coverImage: 'https://picsum.photos/400/300?random=18' },
          { id: 19, name: '颐和园', city: '北京', province: '北京', price: 60, description: '皇家园林，世界遗产', coverImage: 'https://picsum.photos/400/300?random=19' },
          { id: 20, name: '天坛', city: '北京', province: '北京', price: 35, description: '祭天圣地，古代建筑', coverImage: 'https://picsum.photos/400/300?random=20' }
        ],
        '上海': [
          { id: 21, name: '迪士尼乐园', city: '上海', province: '上海', price: 399, description: '梦幻王国，欢乐无限', coverImage: 'https://picsum.photos/400/300?random=21' },
          { id: 22, name: '外滩', city: '上海', province: '上海', price: 0, description: '万国建筑，黄浦江景', coverImage: 'https://picsum.photos/400/300?random=22' },
          { id: 23, name: '东方明珠', city: '上海', province: '上海', price: 220, description: '城市地标，现代象征', coverImage: 'https://picsum.photos/400/300?random=23' },
          { id: 24, name: '豫园', city: '上海', province: '上海', price: 40, description: '江南园林，明代古迹', coverImage: 'https://picsum.photos/400/300?random=24' }
        ]
      };
      return mockData[province] || [];
    },
    // 模拟获取境外景点数据的函数
    getMockForeignData(country) {
      const mockData = {
        '中国澳门': [
          { id: 101, name: '威尼斯人', city: '澳门', country: '中国澳门', price: 0, description: '豪华酒店，购物天堂', coverImage: 'https://fastly.picsum.photos/id/1009/400/300.jpg' },
          { id: 102, name: '大三巴牌坊', city: '澳门', country: '中国澳门', price: 0, description: '历史遗迹，文化象征', coverImage: 'https://fastly.picsum.photos/id/1010/400/300.jpg' },
          { id: 103, name: '新濠影汇', city: '澳门', country: '中国澳门', price: 180, description: '娱乐综合体，表演秀场', coverImage: 'https://fastly.picsum.photos/id/1011/400/300.jpg' },
          { id: 104, name: '澳门塔', city: '澳门', country: '中国澳门', price: 220, description: '城市地标，极限运动', coverImage: 'https://fastly.picsum.photos/id/1012/400/300.jpg' }
        ],
        '美国': [
          { id: 105, name: '迪士尼乐园', city: '洛杉矶', country: '美国', price: 599, description: '梦幻乐园，欢乐圣地', coverImage: 'https://fastly.picsum.photos/id/1013/400/300.jpg' },
          { id: 106, name: '自由女神像', city: '纽约', country: '美国', price: 180, description: '美国象征，世界地标', coverImage: 'https://fastly.picsum.photos/id/1014/400/300.jpg' },
          { id: 107, name: '环球影城', city: '洛杉矶', country: '美国', price: 550, description: '电影世界，娱乐天堂', coverImage: 'https://fastly.picsum.photos/id/1015/400/300.jpg' },
          { id: 108, name: '大峡谷', city: '亚利桑那', country: '美国', price: 350, description: '自然奇观，壮丽景色', coverImage: 'https://fastly.picsum.photos/id/1016/400/300.jpg' }
        ],
        '日本': [
          { id: 109, name: '东京迪士尼', city: '东京', country: '日本', price: 450, description: '主题乐园，动漫天地', coverImage: 'https://fastly.picsum.photos/id/1017/400/300.jpg' },
          { id: 110, name: '富士山', city: '富士河口湖', country: '日本', price: 200, description: '日本圣山，自然美景', coverImage: 'https://fastly.picsum.photos/id/1018/400/300.jpg' },
          { id: 111, name: '大阪环球影城', city: '大阪', country: '日本', price: 480, description: '主题乐园，动漫世界', coverImage: 'https://fastly.picsum.photos/id/1019/400/300.jpg' },
          { id: 112, name: '浅草寺', city: '东京', country: '日本', price: 0, description: '古老寺庙，文化遗产', coverImage: 'https://fastly.picsum.photos/id/1020/400/300.jpg' }
        ],
        '泰国': [
          { id: 113, name: '大皇宫', city: '曼谷', country: '泰国', price: 180, description: '皇家宫殿，建筑瑰宝', coverImage: 'https://fastly.picsum.photos/id/1021/400/300.jpg' },
          { id: 114, name: '芭提雅海滩', city: '芭提雅', country: '泰国', price: 0, description: '阳光沙滩，度假胜地', coverImage: 'https://fastly.picsum.photos/id/1022/400/300.jpg' },
          { id: 115, name: '四面佛', city: '曼谷', country: '泰国', price: 0, description: '宗教圣地，祈福胜地', coverImage: 'https://fastly.picsum.photos/id/1023/400/300.jpg' },
          { id: 116, name: '象岛', city: '象岛', country: '泰国', price: 250, description: '热带天堂，潜水胜地', coverImage: 'https://fastly.picsum.photos/id/1024/400/300.jpg' }
        ],
        '法国': [
          { id: 117, name: '埃菲尔铁塔', city: '巴黎', country: '法国', price: 250, description: '浪漫地标，城市象征', coverImage: 'https://fastly.picsum.photos/id/1025/400/300.jpg' },
          { id: 118, name: '卢浮宫', city: '巴黎', country: '法国', price: 170, description: '艺术殿堂，世界博物馆', coverImage: 'https://fastly.picsum.photos/id/1026/400/300.jpg' },
          { id: 119, name: '凡尔赛宫', city: '巴黎', country: '法国', price: 200, description: '皇家宫殿，历史遗产', coverImage: 'https://fastly.picsum.photos/id/1027/400/300.jpg' },
          { id: 120, name: '巴黎迪士尼', city: '巴黎', country: '法国', price: 480, description: '欧洲乐园，童话世界', coverImage: 'https://fastly.picsum.photos/id/1028/400/300.jpg' }
        ]
      };
      return mockData[country] || [];
    },
    // 处理图片路径 - 支持在线和本地路径
    getImagePath(filename) {
      console.log('处理图片路径:', filename);
      if (!filename) {
        console.log('文件名为空，使用默认图片');
        return this.defaultImage;
      }

      // 检查是否是在线URL
      if (filename.startsWith('http://') || filename.startsWith('https://')) {
        console.log('使用在线图片路径:', filename);
        return filename;
      }

      // 处理本地图片路径 - 尝试多种后缀
      const extensions = ['', '.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp'];
      
      for (const ext of extensions) {
        try {
          const fullPath = `../imgs/${filename}${ext}`;
          const imageUrl = new URL(fullPath, import.meta.url).href;
          console.log('尝试图片路径:', fullPath);
          return imageUrl;
        } catch (error) {
          console.log('路径无效，尝试下一个:', fullPath);
          continue;
        }
      }

      console.error('所有图片格式都无效，使用默认图片');
      return this.defaultImage;
    },

    // 获取本地图片路径 - 支持多种后缀
    getLocalImagePath(index) {
      const filename = '100' + index.toString().padStart(2, '0');
      
      // 根据实际文件精确匹配扩展名
      const extensionMap = {
        '10001': '.png',
        '10002': '.jpg',
        '10003': '.jpg', 
        '10004': '.png',
        '10005': '.jpeg',
        '10006': '.jpeg',
        '10007': '.jpeg',
        '10008': '.jpg',
        '10009': '.jpeg',
        '10010': '.jpeg',
        '10011': '.jpg',
        '10012': '.jpeg'
      };
      
      // 优先使用映射的扩展名
      if (extensionMap[filename]) {
        try {
          const imageUrl = new URL(`../imgs/${filename}${extensionMap[filename]}`, import.meta.url).href;
          console.log('使用精确匹配的扩展名:', `${filename}${extensionMap[filename]}`);
          return imageUrl;
        } catch (error) {
          console.log('精确匹配路径无效:', `${filename}${extensionMap[filename]}`);
        }
      }
      
      // 如果没有映射，尝试常见扩展名
      const extensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
      
      for (const ext of extensions) {
        try {
          const imageUrl = new URL(`../imgs/${filename}${ext}`, import.meta.url).href;
          console.log('尝试本地图片路径:', `${filename}${ext}`);
          return imageUrl;
        } catch (error) {
          console.log('路径无效，尝试下一个扩展名:', `${filename}${ext}`);
          continue;
        }
      }
      
      console.log('所有扩展名都无效，使用默认图片');
      return this.defaultImage;
    },

    // 处理图片加载失败
    handleImageError(event) {
      console.log('图片加载失败，原始src:', event.target.src);
      console.log('切换到默认图片');
      event.target.src = this.defaultImage;
    },
    
    handleImageLoad(event) {
      const src = event.target.src;
      this.imageStates.set(src, 'loaded');
    },
    
    isLoading(src) {
      return !this.imageStates.has(src);
    },
    
    hasError(src) {
      return this.imageStates.get(src) === 'error';
    },
    initData() {
      this.searchDomesticAttractions(this.selectedProvince);
      this.searchForeignAttractions(this.selectedCountry);
    }
  },
  created() {
    this.initData();
  },
  mounted() {
    console.log('组件挂载完成');
  }
}
</script>

<style scoped>
.scenic-container {
  font-family: 'Arial', sans-serif;
  padding: 20px;
  background-color: #f9f9f9;
  max-width: 1400px;
  margin: auto;
}

.top-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.sidebar {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  flex: 0 0 250px;
}

.sidebar-item:not(:last-child) {
  margin-bottom: 25px;
}

.sidebar-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 600;
}

.sidebar-title .icon {
  width: 4px;
  height: 16px;
  background-color: #ffc107;
  margin-right: 8px;
  border-radius: 2px;
}

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-list.multi-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px;
}

.sidebar-list.multi-column li {
  color: #666;
  font-size: 14px;
  padding: 3px 5px;
}

.sidebar-list:not(.multi-column) {
  padding: 10px;
}

.sidebar-list:not(.multi-column) li {
  width: 100%;
  padding: 5px;
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.sidebar-list li:hover {
  color: #ff6600;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-grow: 1;
}

.main-content img, .right-banner img, .ticket-card img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    display: block;
}

.banner-top, .banner-bottom, .right-banner, .ticket-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.right-banner {
  flex: 0 0 300px;
}

.right-banner .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    color: white;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.overlay .date-day {
    font-size: 52px;
    font-weight: bold;
    line-height: 1;
}
.overlay .date-month-year {
    font-size: 16px;
    border: 1px solid white;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    margin: 8px 0 15px;
}
.overlay .description {
    font-size: 16px;
    margin-bottom: 8px;
}
.overlay .location {
    font-size: 13px;
    opacity: 0.9;
}

.bottom-section {
  background-color: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.bottom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.bottom-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 25px;
}

.tab-item {
  font-size: 15px;
  color: #555;
  cursor: pointer;
  padding-bottom: 15px;
  margin-bottom: -16px; /* align with border */
  border-bottom: 3px solid transparent;
}
.tab-item.title {
    font-weight: 600;
    color: #333;
}
.tab-item.active, .tab-item:hover {
  color: #ff6600;
  border-bottom-color: #ff6600;
}

.tickets-container {
    display: flex;
    gap: 20px;
}

.ranking-list {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ranking-list h4 {
  margin: 0;
  padding-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.rank-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.rank-badge {
    background-color: #f0f0f0;
    color: #888;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    margin-right: 12px;
}
.rank-item:nth-child(1) .rank-badge,
.rank-item:nth-child(2) .rank-badge,
.rank-item:nth-child(3) .rank-badge {
    background-color: #ff6600;
    color: white;
}

.rank-name {
    flex-grow: 1;
    color: #333;
}
.rank-price {
    font-size: 16px;
    color: #ff4500;
    font-weight: bold;
}

.tickets-grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.coop-section {
  background-color: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.coop-section .bottom-title {
    margin-bottom: 20px;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid #f0f0f0;
}

.logo-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  box-sizing: border-box;
}

.logo-item:nth-child(6n) {
    border-right: none;
}

.logo-item:nth-last-child(-n+6) {
    /* Targeting the last row for bottom border removal is tricky if the number of items is not a multiple of 6. This is a simplification. */
    border-bottom: none;
}

.logo-item img {
  max-width: 100px;
  height: auto;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.logo-item:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.hover-trigger {
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 4px;
  padding: 5px;
}

/* 只在悬浮时显示淡灰色背景 */
.hover-trigger:hover {
  background-color: #f5f5f5;
}

.destination-popup {
  position: absolute;
  top: 0;
  left: calc(100% - 1px);
  width: 800px;
  background: white;
  border: 1px solid #eee;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 4px;
  padding: 20px;
}

/* 添加透明桥接区域 */
.destination-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 10px;
  height: 100%;
  background: transparent;
}

.popup-content {
  max-height: 600px;
  overflow-y: auto;
}

.city-section {
  margin-bottom: 20px;
}

.letter-group h3 {
  color: #333;
  font-size: 16px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.city-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.city-grid a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  padding: 5px;
  text-align: center;
}

.city-grid a:hover {
  color: #1890ff;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.sidebar-item {
  position: relative;
}

.ticket-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.ticket-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ticket-card:active {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ticket-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  transition: opacity 0.3s;
}

.ticket-card img.loading {
  opacity: 0.5;
}

.ticket-card img.error {
  opacity: 0.3;
  background-color: #f5f5f5;
}

.ticket-info {
  padding: 12px;
  background: white;
}

.ticket-info h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.ticket-info p {
  margin: 4px 0;
  font-size: 14px;
  color: #666;
}

.ticket-info .description {
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tab-item {
  cursor: pointer;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

.tab-item:hover {
  color: #1890ff;
}

.tab-item.active {
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}
</style> 